<template>
	<div>
		<Menu
			mode="horizontal"
			theme="light"
			active-name="1"
			style="justify-content:space-around;display: flex;"
		>
			<div @click="gotoIndex">
				<Avatar shape="square" icon="ios-home" />
			</div>

			<MenuItem name="1" to="/"> <b>首页</b></MenuItem>
			<MenuItem name="5"> <b>使用介绍</b></MenuItem>

			<MenuItem name="2">
				<b>问答</b>
			</MenuItem>
			<MenuItem name="3">
				<b>联系我们</b>
			</MenuItem>
			<MenuItem name="4">
				<Button shape="circle" type="primary" @click="gotoCreate"
					>创建NFT</Button
				>
			</MenuItem>
			<MenuItem name="5" style="display:flex;align-items:center">
				<div
					style="border: 1px solid #dcdee2;line-height:30px;align-self:center;
					border-radius:30px;width:130px;display:flex;justify-content:space-between"
				>
					<span style="padding-left:12px;max-width:61px"
						>{{ userAddress.slice(1, 5) }}....{{
							userAddress.slice(38)
						}}
					</span>
					<Poptip
						:title="userAddress"
						content="content"
						placement="bottom-end"
					>
						<Avatar
							style="background-color: #87d068"
							icon="ios-person"
						/>
						<div class="api" slot="content">
							<ul
								style="color:#333; line-height:40px;text-align:center"
							>
								<li @click="gotoMyHome">
									我的账户
								</li>

								<li @click="gotoEdit">
									编辑个人信息
								</li>
								<!-- <li>
									GIF/Video autoplay
								</li>
								<li>
									Disconnect
								</li> -->
							</ul>
						</div>
					</Poptip>
				</div>
			</MenuItem>
		</Menu>
	</div>
</template>

<script>
export default {
	data() {
		return {
			userAddress: '',
		};
	},
	props: ['transUserAddress'],

	methods: {
		gotoCreate() {
			this.$router.push('/create/erc721');
		},
		gotoMyHome() {
			this.$router.push('/myhome');
		},
		gotoEdit() {
			this.$router.push('/edit');
		},
		gotoIndex() {
			this.$router.push('/');
		},
	},
	async mounted() {
		if (
			localStorage.getItem('address') &&
			localStorage.getItem('address').length == 42
		) {
			this.userAddress = localStorage.getItem('address');
		} else {
			this.userAddress = this.transUserAddress;
		}
	},
};
</script>
